<template>
    <view class="menus-box" :style="!isExpand ? ' left: 0px;' : ''">
        <view
            class="item"
            v-for="item in list"
            @click="clickItem(item)"
            :key="item.id"
        >
            <view class="menu-icon">
                <image :src="item.path"></image>
            </view>
            <view class="menu-txt">{{ item.title }}</view>
        </view>
    </view>
</template>
	
<script >
import windBtnContrl from "../../js/WinBtnContrl.js";
import tabBarConntrl from "../../js/TabBarContrl.js";
import goPage from "../../js/GoPage.js";
import lang from "../../js/conf/Lang.js";
import accessCtrl from "../../js/limit/AccessCtrl.js";
import { mapGetters } from "vuex";
export default {
    computed: {
        ...mapGetters(["isExpand"]),
    },
    data() {
        return {
            list: [
                {
                    title: lang.swichTxt,
                    id: 2,
                    path: "/static/images/switch.png",
                },
                {
                    title: lang.vipTxt,
                    id: 3,
                    path: "/static/images/menu07.png",
                },
                {
                    title: lang.exitLbTxt,
                    id: 0,
                    path: "/static/images/exit.png",
                },
                {
                    title: lang.aboutTxt,
                    id: 1,
                    path: "/static/images/about.png",
                },
            ],
        };
    },
    created() {
        this.initData();
    },
    methods: {
        async initData() {
            if (await accessCtrl.getLimitgdsdeploy()) {
                const data = {
                    title: lang.gdconfigTxt,
                    id: 4,
                    path: "/static/images/gd-set-icon.png",
                    page: "/pages/commodityConfig/index",
                };
                this.list.unshift(data);
            }
            if (await accessCtrl.getAboutLimit()) {
                const data = {
                    title: lang.pjconfigTxt,
                    id: 5,
                    path: "/static/images/xm-set-icon.png",
                    page: "/pages/projectConfig/index",
                };
                this.list.unshift(data);
            }
        },
        clickItem(item) {
            if (item.id == 0) {
                tabBarConntrl.close();
            } else if (item.id == 2) {
                tabBarConntrl.switchAccount();
            } else if (item.id == 1) {
                this.$emit("setMenuHandler", item.id);
            } else if (item.id == 3) {
                this.$emit("openVip");
            } else {
                goPage.goNavTo(item.page);
            }
        },
    },
};
</script>

<style lang="scss">
.menus-box {
    position: absolute;
    bottom: 20px;
    // left: 72px;
    left: 0;
    width: 100px;
    background: #292f4c;
    padding: 5px;
    color: #6d7184;
    display: block;
    box-sizing: border-box;
    z-index: 9999;
    .item {
        display: flex;
        width: 100%;
        cursor: pointer;
        .menu-icon {
            width: 20px;
            height: 20px;
            margin: 4px;
            image {
                width: 100%;
                height: 100%;
            }
        }
        .menu-txt {
            margin: 4px;
        }
    }
    .item:hover {
        background: #f8f8f8;
    }
}
</style>
